<template>
  <q-dialog v-model="visible">
    <q-card>
      <q-card-section class="text-h6">下发运动指令</q-card-section>
      <q-separator />
      <q-card-section class="q-gutter-y-sm">
        <q-input
          label="点位名称"
          dense
          outlined
          :model-value="pose.name"
          readonly
        />
        <q-select
          outlined
          dense
          readonly
          :model-value="pose.type"
          :options="poseTypes"
          clearable
          label="点位类型"
          emit-value
          map-options
        />
        <amr-selector
          outlined
          v-model="moveCmd.device"
          online
          :map-id="mapId"
        />
        <template v-if="pose.type">
          <q-select
            label="充电桩指令"
            outlined
            map-options
            emit-value
            v-model="moveCmd.type"
            v-if="pose.type === 'charger'"
            :options="chargerType"
            @popup-hide="cmdTypeChange"
            behavior="menu"
          />
          <q-select
            label="顶升指令"
            outlined
            map-options
            emit-value
            v-model="moveCmd.type"
            v-else-if="pose.type === 'station-lift'"
            :options="liftOption"
            @popup-hide="cmdTypeChange"
            behavior="menu"
          />
          <q-select
            label="运动指令"
            outlined
            map-options
            emit-value
            v-model="moveCmd.type"
            v-else-if="pose.type === 'station-port'"
            :options="portOption.concat(typeOptions)"
            @popup-hide="cmdTypeChange"
            behavior="menu"
          />
          <q-select
            label="运动指令"
            outlined
            map-options
            emit-value
            v-model="moveCmd.type"
            v-else-if="pose.type.includes('catch')"
            :options="catchOption.concat(typeOptions)"
            @popup-hide="cmdTypeChange"
            behavior="menu"
          />
          <q-select
            label="目标指令"
            outlined
            map-options
            emit-value
            v-model="moveCmd.type"
            v-else
            @popup-hide="cmdTypeChange"
            :options="typeOptions"
            behavior="menu"
          />
          <template
            v-if="pose.type === 'station-port' && moveCmd.type.includes('load')"
          >
            <q-input
              outlined
              label="目标接驳台层数"
              v-model="moveCmd.content.level"
              type="number"
            />
            <q-input
              outlined
              label="货物规格"
              v-model="moveCmd.content.specs"
            />
          </template>
          <template
            v-else-if="
              pose.type.includes('catch') && moveCmd.type.includes('load')
            "
          >
            <q-input
              outlined
              label="货物数量"
              v-model="moveCmd.content.count"
              type="number"
            />
            <q-input
              outlined
              label="货物规格"
              v-model="moveCmd.content.specs"
            />
            <posture-selector outlined v-model="moveCmd.content.posture" />
          </template>
          <template
            v-else-if="
              pose.type === 'station-lift' &&
              ['lift-in', 'lift-out'].includes(moveCmd.type)
            "
          >
            <q-input
              outlined
              label="目标层数"
              v-model="moveCmd.content.level"
              type="number"
            />
            <q-input
              outlined
              label="货物规格"
              v-model="moveCmd.content.specs"
            />
          </template>
        </template>
        <q-select
          label="目标指令"
          outlined
          map-options
          emit-value
          v-model="moveCmd.type"
          v-else
          @popup-hide="cmdTypeChange"
          :options="typeOptions"
          behavior="menu"
        />
      </q-card-section>
      <q-slide-transition>
        <div class="bg-primary" v-if="!incomplete">
          <q-btn
            class="full-width text-subtitle1"
            color="primary"
            stretch
            label="下发指令"
            icon="send"
            @click="send"
          />
        </div>
      </q-slide-transition>
    </q-card>
  </q-dialog>
</template>

<script>
import { ref, inject, computed, watch } from "vue";
import { api } from "boot/axios.js";
import { useAPIStore } from "stores/api";
import { useQuasar } from "quasar";
import AmrSelector from "components/rosMapRemote/AmrSelector.vue";
import PostureSelector from "components/rosMapRemote/PostureSelector.vue";

const liftOption = [
  {
    label: "顶升存料",
    value: "lift-in",
  },
  {
    label: "顶升取料",
    value: "lift-out",
  },
];

const portOption = [
  {
    label: "立体库取货",
    value: "load",
  },
  {
    label: "立体库放货",
    value: "unload",
  },
];

const catchOption = [
  {
    label: "机械臂取货",
    value: "load",
  },
  {
    label: "机械臂放货",
    value: "unload",
  },
];

const typeOptions = [
  {
    label: "普通移动",
    value: "move-basic",
  },
  {
    label: "带方向导航",
    value: "move-directional",
  },
  {
    label: "直线行驶",
    value: "move-straight",
  },
];

const chargerType = [
  {
    label: "自动充电",
    value: "charge",
  },
];

export default {
  name: "MoveCmdDialog",
  components: {
    PostureSelector,
    AmrSelector,
  },
  props: {
    pose: Object,
    local: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const $q = useQuasar();
    // const status = inject('status')
    const visible = ref(false);
    const moveCmd = ref({
      type: "",
      content: "",
      device: "",
    });
    const deviceList = ref([]);
    const poseType = computed(() => props.pose.type);
    watch(poseType, (value) => {
      moveCmd.value.type = "";
    });

    function cmdTypeChange() {
      switch (moveCmd.value.type) {
        case "lift-in":
        case "lift-out":
          moveCmd.value.content = {
            poseID: props.pose.id,
            specs: "",
            level: 1,
          };
          break;
        case "load":
        case "unload":
          if (props.pose.type.includes("catch")) {
            moveCmd.value.content = {
              poseID: props.pose.id,
              specs: "",
              count: 1,
              posture: "",
            };
          } else {
            moveCmd.value.content = {
              poseID: props.pose.id,
              specs: "",
              level: 1,
            };
          }
          break;
        default:
          moveCmd.value.content = props.pose.id;
      }
    }

    return {
      visible,
      moveCmd,
      mapId: inject("mapId"),
      show() {
        visible.value = true;
        moveCmd.value.content = props.pose.id;
        if (props.local) {
          // moveCmd.value.device = status.value.device
        }
        cmdTypeChange();
      },
      deviceList,
      typeOptions,
      chargerType,
      liftOption,
      portOption,
      catchOption,
      poseTypes: inject("poseTypes"),
      incomplete: computed(
        () =>
          moveCmd.value.device === "" ||
          moveCmd.value.type === "" ||
          moveCmd.value.content === ""
      ),
      cmdTypeChange,
      send() {
        if (props.local) {
          api.post(useAPIStore().amrUrl + "add", moveCmd.value).then((rs) => {
            if (rs.data === "done") {
              $q.notify({
                type: "positive",
                message: "指令已下发",
              });
            }
          });
        } else {
          api
            .post(
              useAPIStore().centerUrl + "center/send/" + moveCmd.value.device,
              moveCmd.value
            )
            .then((rs) => {
              if (rs.data === "done") {
                $q.notify({
                  type: "positive",
                  message: "指令已下发",
                });
              }
            });
        }
      },
    };
  },
};
</script>
